<template>
  <v-navigation-drawer class="d-flex flex-column" permanent v-model="store.drawer">
    <AppLogo />

    <Scrollbar height="var(--main-height)">
      <UserPanel />
      <Menu />
    </Scrollbar>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import AppLogo from "@/components/global/AppLogo.vue";
import Menu from "@/components/global/Menu/Menu.vue";
import Scrollbar from "@/components/global/Scrollbar.vue";
import UserPanel from "@/components/global/UserOverview.vue";
import { useLayoutStore } from "@/stores/layoutStore";
const store = useLayoutStore();
</script>

<style scoped>
:deep(.v-navigation-drawer__content) {
  overflow: hidden !important;
}
.ps {
  height: calc(var(--main-height) - var(--user-overview-height));
}
.custom-scroll-container {
  height: calc(var(--main-height) - var(--user-overview-height));
  overflow-y: auto; /* 垂直滚动 */
  padding: 10px;

  border-radius: 8px; /* 圆角容器 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影 */

  /* 自定义滚动条样式 */
  /* 适用于基于 Webkit 的浏览器 (Chrome, Safari, Edge, Opera) */
  &::-webkit-scrollbar {
    width: 8px; /* 滚动条的宽度 */
    background-color: transparent; /* 滚动条的背景色，可以保持透明 */
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #e8eaf6; /* 浅蓝色轨道 */
    border-radius: 10px; /* 轨道圆角 */
    margin: 5px 0; /* 上下边距，使滚动条与容器边缘有间距 */
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* 渐变色滑块，更时尚 */
    border-radius: 10px; /* 滑块圆角 */
    border: 2px solid transparent; /* 给滑块添加透明边框，让轨道看起来更突出 */
    background-clip: padding-box; /* 确保背景只应用到 padding-box */
  }

  /* 滚动条滑块在hover时的样式 */
  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4a90e2 100%); /* hover时颜色变亮或略微不同 */
  }

  /* 滚动条角落（如果有水平和垂直滚动条同时出现） */
  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Firefox 滚动条样式（简单但兼容性更好） */
  /* 如果你需要支持 Firefox，可以添加以下样式 */
  scrollbar-width: thin; /* 'auto' 或 'thin' */
  scrollbar-color: #2575fc #e8eaf6; /* thumb color track color */
}

/* 菜单项的基础样式，让内容看起来更整洁 */
.custom-scroll-container div p {
  padding: 8px 0;
  border-bottom: 1px dashed #eceff1;
  color: #333;
  font-family: Arial, sans-serif;
}

.custom-scroll-container div p:last-child {
  border-bottom: none;
}
</style>
